<template>
  <div>
    <!-- <div class="top"> -->
    <!-- <van-icon name="arrow-left" @click="backApp" />
      <h5>值班管理系统</h5> -->
    <van-nav-bar left-text="值班管理系统" left-arrow @click-left="backApp" />
    <!-- </div> -->
    <div ref="content" class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div style="background:rgb(245, 245, 245);border-radius: 10px 10px 0 0;">
          <div class="item count">
            <div>
              <span>{{ dataTatistics.zBEmergencyMainCount || 0 }}</span>
              <span>突发事件</span>
            </div>
            <div>
              <span>{{ dataTatistics.zBEgressReportCount || 0 }}</span>
              <span>外出报备</span>
            </div>
            <div>
              <span>{{ dataTatistics.zBDutyInfoMainCount || 0 }}</span>
              <span>值班信息</span>
            </div>
            <div>
              <span>{{ dataTatistics.zBLeaderCheck || 0 }}</span>
              <span>批示落实</span>
            </div>
          </div>
          <div class="item app-list">
            <h5>值班应用</h5>
            <ul>
              <li>
                <router-link to="./activity/list">
                  <img :src="require('@/assets/images/icon1.png')" alt />
                  <span>领导活动</span>
                </router-link>
              </li>
              <li>
                <router-link to="./message/list">
                  <img :src="require('@/assets/images/icon2.png')" alt />
                  <span>信息接报</span>
                </router-link>
              </li>
              <li>
                <router-link to="./task/list">
                  <img :src="require('@/assets/images/icon3.png')" alt />
                  <span>批示落实</span>
                </router-link>
              </li>
              <li>
                <router-link to="./addressBook/list">
                  <img :src="require('@/assets/images/icon4.png')" alt />
                  <span>通讯录</span>
                </router-link>
              </li>
              <li>
                <router-link to="./logbook/list">
                  <img :src="require('@/assets/images/icon5.png')" alt />
                  <span>值班日志</span>
                </router-link>
              </li>
              <li>
                <router-link to="./fax/list">
                  <img :src="require('@/assets/images/icon6.png')" alt />
                  <span>传真文件</span>
                </router-link>
              </li>
              <li>
                <router-link to="./calls/list">
                  <img :src="require('@/assets/images/icon7.png')" alt />
                  <span>电话记录</span>
                </router-link>
              </li>
              <li>
                <router-link to="./newSletter/list">
                  <img :src="require('@/assets/images/icon8.png')" alt />
                  <span>值班快报</span>
                </router-link>
              </li>
              <li>
                <router-link to="./notice/list">
                  <img :src="require('@/assets/images/icon9.png')" alt />
                  <span>通知公告</span>
                </router-link>
              </li>
              <li>
                <router-link to="./status/list">
                  <img :src="require('@/assets/images/icon9-2.png')" alt />
                  <span>落实情况</span>
                </router-link>
              </li>
              <li>
                <router-link to="./statistics/list">
                  <img :src="require('@/assets/images/icon10.png')" alt />
                  <span>值班统计</span>
                </router-link>
              </li>
              <li>
                <router-link to="./picnews/list">
                  <img :src="require('@/assets/images/icon11.png')" alt />
                  <span>图片新闻</span>
                </router-link>
              </li>
              <li>
                <router-link to="./doWork/list">
                  <img :src="require('@/assets/images/icon12.png')" alt />
                  <span>处室工作</span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </van-pull-refresh>
    </div>

  </div>
</template>
<script>
import scroll from '../mixins/scrollTop'
import { appRequest } from '@/utils/utils'
export default {
  name: 'index',
  components: {},
  data () {
    return {
      active: 0,
      dataTatistics: {}, //app头部数字统计
      zbReceivingList: [], //最新信息列表
      zBEmergencyList: [], //突发事件列表
      zBEgressReportList: [], //外出报备列表
      zBDutyInfoList: [], //值班信息列表
      zBHolidayList: [], //节假日值班列表
      dutyMainList: [], //今日值班列表
      handoverList: [], //交接班事项列表
      bg: require('@/assets/images/index_bg1.png'),
      scrollBox: 'content',
      isLoading: false
    }
  },
  mixins: [scroll],
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next((vm) => {
      document.getElementsByTagName(
        'html'
      )[0].style.background = `#f5f5f5 url('${vm.bg}') top center / 100%  no-repeat`
      setTimeout(() => {
        document.getElementById('app').style.background = `transparent`
      }, 100);
    })
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.getElementsByTagName('html')[0].style.background = ``
    document.getElementById('app').style = ''
    next()
  },
  created () {
    this.$store.commit('addInclude', 'index')
  },
  activated () {
    this.onRefresh()
    if (this.$store.state.include.length > 0) {
      this.$store.commit('deleteInclude', 'all')
    }
    this.$store.commit('addInclude', 'index')
  },
  mounted () {
  },
  methods: {
    backApp () {
      appRequest({}, 0)
    },
    onRefresh () {
      this.isLoading = false
    },
   

  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-nav-bar {
  background: transparent;
  .van-nav-bar__text {
    font-size: 18px;
  }
  .van-icon-arrow-left {
    // font-size: 18px;
    margin-right: 5px;
  }
  &.van-hairline--bottom::after {
    display: none;
  }
}
.van-pull-refresh {
    height: 100%;
}
div {
  font-size: 20px;
}
.item {
  padding: 15px;
  border-radius: $border-radius;
  background-color: #fff;
  margin: $padding 0;
}
::v-deep .van-divider {
  margin-bottom: 4px;
}
.more {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: $mainColor;
}
.content {
  height: calc(100% - 53px);
  padding: 0 10px;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.count {
  background: url('../assets/images/index_bg2.png') center/110% no-repeat;
  background-color: #fff;
  display: flex;
  height: 100px;
  align-items: center;
  div {
    text-align: center;
    width: 25%;
    span {
      display: block;
      width: 100%;
      &:nth-of-type(1) {
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #ff6633;
      }
      &:nth-of-type(2) {
        font-size: 12px;
        color: #7f7f7f;
      }
    }
    &:nth-of-type(2) {
      span:nth-of-type(1) {
        color: #996600;
      }
    }
    &:nth-of-type(3) {
      span:nth-of-type(1) {
        color: #3366ff;
      }
    }
    &:nth-of-type(4) {
      span:nth-of-type(1) {
        color: #00cccc;
      }
    }
  }
}
.tab {
  // padding: 10px;
  ul {
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
      width: 100%;
      &:hover {
        opacity: 0.8;
      }
      span {
        &:nth-of-type(1) {
          width: 50%;
          color: $text-gray2;
          font-size: 13px;
          padding-left: 5px;
        }
        &:nth-of-type(2) {
          width: 24%;
          text-align: right;
          font-size: 12px;
          color: #aaa;
        }
        &:nth-of-type(3) {
          width: 26%;
          text-align: right;
          font-size: 12px;
          color: #aaa;
        }
      }
    }
  }
}
.app-list {
  h5 {
    margin: 0;
    margin-bottom: 10px;
    color: $mainColor;
    font-size: 15px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 21%;
      text-align: center;
      margin: 8px 0px;
      img {
        display: block;
        margin: 0 auto;
        width: 38px;
      }
      span {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
.bottom {
  display: flex;
  .item {
    margin-top: 0;
  }
  .left {
    width: 35%;
    margin-right: 0;
    flex-shrink: 0;
    ul {
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        span {
          &:nth-of-type(1) {
            font-size: 13px;
            font-weight: bold;
            color: #b8741a;
            width: 80px;
            white-space: nowrap; //不换行
            overflow: hidden; //超出隐藏
            text-overflow: ellipsis; //变成...
          }
          &:nth-of-type(2) {
            font-size: 11px;
            color: #b8741a;
            width: 30px;
            height: 20px;
            background: rgba(51, 102, 255, 0.05);
            text-align: center;
            display: inline-block;
            line-height: 20px;
            color: #3366ff;
          }
        }
      }
    }
  }
  .right {
    width: 100%;
    ul {
      li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        width: 100%;
        &:hover {
          opacity: 0.8;
        }
        span {
          &:nth-of-type(1) {
            width: 72% !important;
            color: $text-gray2;
            font-size: 12px;
          }
          &:nth-of-type(2) {
            width: 28%;
            text-align: right;
            font-size: 12px;
            color: #aaa;
          }
        }
      }
    }
  }
  > div {
    h5 {
      margin: 0;
      color: $mainColor;
      font-size: 15px;
      background: url('../assets/images/more.png') center right / 18px no-repeat;
      margin-bottom: 15px;
    }
  }
}
.top {
  color: #fff;
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 20px;
  padding-left: $padding;
  h5 {
    margin: 0;
    font-size: 18px;
    margin-left: 10px;
  }
}
::v-deep .van-tab {
  padding-right: 10px !important;
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  padding-left: 0;
  padding-right: 0;
}
::v-deep .van-tabs__wrap--scrollable .van-tab {
  padding: 0;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 34px;
}
::v-deep .van-tabs__line {
  bottom: 11px;
  border-radius: 10px;
  height: 4px;
  width: 30px;
}
::v-deep.van-empty {
  padding: 10px 0;
}
::v-deep .van-empty__description {
  padding: 0;
}
.empty-box {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #969799;
  font-size: 14px;
}
</style>